import styled from 'styled-components'

export const HexiaoBox = styled.div`
    width: 100vw;
    height: 100vh;
    padding-top: 5%;
    background-color: rgb(32,36,40);
    .hexiao-top{
        margin: 0 auto;
        width: 90%;
        height: 35%;
        display: flex;
        justify-content: space-between;
        .top-left{
            width: 33%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .content-box{
                width: 42%;
                height: 27%;
                background-color: rgb(25,28,31);
                border-radius: 8px;
                font-size: 2.8vh;
                color: #fff;
                display: flex;
                justify-content: space-around;
                align-items: center;
            }
            .contentBlueBox{
                width: 42%;
                height:40%;
                background-color: rgb(67,87,234);
                border-radius: 8px;
                color: #fff;
                .content-title{
                    font-size: 2.2vh;
                    margin: 4% 0 0 9%;
                    color:#D0D5D7;
                }
                .content-main{
                    font-size: 3.5vh;
                    font-family: 'PingFang-SC-Bold';
                    margin-top: 8%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    span{
                        display: inline-block;
                        font-family: 'PingFang-SC-Bold';
                        transform: translateY(33%);
                    }
                }
            }
        }
        .top-right{
            width: 35%;
            height: 90%;
            background-color: rgb(23,24,26);
            color: #fff;
            border-radius: 10px;
            .content-time{
                font-size: 9.5vh;
                margin: 12% 0 0 16%;
            }
            .content-date{
                font-size: 3vh;
                margin: 5% 0 0 18%;
            }
        }
    }
    .hexiao-bot{
        margin: 0 auto;
        width: 90%;
        height: 60%;
        display: flex;
        justify-content: space-between;
        color: #fff;
        .bot-left{
            width: 33%;
            height: 100%;
            .hexiao{
                height: 10%;
                display: flex;
                align-items: end;
                padding-bottom: 1.5vh;
                font-size: 3vh;
            }
            .content{
                width: 100%;
                height: 85%;
                background-color: rgb(26,28,30);
                border-radius: 8px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                padding: 0 10% 0 10%;
                li{
                    display: flex;
                    font-size: 2.6vh;
                    height:20%;
                    align-items: center;
                    font-size: 3.5vh;
                    .hexiao-title{
                        width: 40%;
                        color:#D0D5D7;
                    }
                    .hexiao-data{
                        width: 50%;
                        margin-left: 15%;
                    }
                }
            }
        }
        .bot-right{
            width: 60%;
            height: 100%;
            .caipin{
                height: 10%;
                display: flex;
                align-items: end;
                padding-bottom: 1.5vh;
                font-size: 3vh;
            }
            .data{
                width: 100%;
                height: 85%;
                background-color: #191B1D;
                border-radius: 8px;
                .caipin-title{
                    height:18%;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    background-color: rgb(22,24,26);
                    border-radius: 8px 8px 8px 8px;
                    box-shadow: 0px 0px 2px 0px #0F0F0F;
                    opacity: 0.88;
                    font-size: 3vh;
                    div{
                        width: 20%;
                        text-align: center;
                    }
                }
                .caipin-data{
                    height: 80%;
                    overflow-y: scroll;
                    li{
                        height:18%;
                        display: flex;
                        align-items: center;
                        justify-content: space-around;
                        margin-top: 3.2%;
                        font-size: 3vh;
                        div{
                            width: 20%;
                            text-align: center;
                        }
                    }
                }
            }
        }
    }
    .jiazai-box {
        width: 100vw; /* 设置宽度为页面宽度的一半 */
        height:100vh; /* 设置高度为视口高度的50% */
        background-color: rgba(32,36,40, 0.8); /* 设置背景颜色，并添加透明度 */
        display: flex; /* 使用flex布局 */
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        position: fixed; /* 固定定位，相对于视口定位 */
        top: 50%; /* 从视口顶部50%的位置开始 */
        left: 50%; /* 从视口左侧50%的位置开始 */
        transform: translate(-50%, -50%); /* 使用transform进行偏移，以实现居中效果 */
        z-index: 1000; /* 确保加载框位于最上层 */
        }

        .jiazai-box::before {
        content: ''; /* 伪元素需要content属性 */
        width: 50px; /* 设置小圆圈的宽度 */
        height: 50px; /* 设置小圆圈的高度 */
        border: 5px solid #f3f3f3; /* 设置边框颜色 */
        border-top: 5px solid #3498db; /* 设置顶部边框颜色，形成加载动画效果 */
        border-radius: 50%; /* 使伪元素变成圆形 */
        animation: spin 1s linear infinite; /* 应用无限旋转的动画 */
        }

        /* 定义加载动画的关键帧 */
        @keyframes spin {
        0% {
            transform: translateY(-50%) rotate(0deg); /* 开始时，不旋转 */
        }
        100% {
            transform: translateY(-50%) rotate(360deg); /* 结束时，旋转一圈 */
        }
        }
`